<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <span id="el">{{msg}}</span>
    <input type="text" v-model="msg">
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        methods: {
            showMsg(){
                console.log("showMsg() 方法被调用了")
            }
        },
        beforeCreate(){
            console.log("-- vue 初始化进行中...")
            console.log("当前 msg 的值为："+this.msg)
            // this.showMsg() 报错
        },
        created(){
            console.log("-- vue 初始化完成")
            console.log("当前 msg 的值为："+this.msg)
            this.showMsg()
        },
        beforeMount(){
            console.log("-- vue 挂载进行中...")
            console.log(document.getElementById("el").innerText);
            console.log("当前 msg 的值为："+this.msg)
        },
        mounted(){
            console.log("-- vue 挂载完成")
            console.log(document.getElementById("el").innerText);
            console.log("当前 msg 的值为："+this.msg)
        },
        beforeUpdate(){
            console.log("-- vue 更新进行中...")
            console.log(document.getElementById("el").innerText);
            console.log("当前 msg 的值为："+this.msg)
        },
        updated(){
            console.log("-- vue 更新完成")
            console.log(document.getElementById("el").innerText);
            console.log("当前 msg 的值为："+this.msg)
        }

    });
</script>